﻿<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>html 5 Test</title>


<style>
#modules .yui-b {
	POSITION: static;
	MARGIN: 0px 0px 1em;
	WIDTH: auto;
	DISPLAY: block;
	FLOAT: none;
	OVERFLOW: hidden
}
.yui-gb .yui-u {
	WIDTH: 32%;
	FLOAT: left;
	MARGIN-LEFT: 2%
}
.yui-gb DIV.first {
	MARGIN-LEFT: 0px
}
#modules {
	ZOOM: 1
}
.yui-gb {
	ZOOM: 1
}
.modbox {
	border:1px dotted #000
}
.modbox .csl {
	DISPLAY: none
}
.modbox .es {
	DISPLAY: none
}
.modbox_e .el {
	DISPLAY: none
}
.over {
	border: 2px dashed #000;
}
#dropzone {
	height: 150px;
	width: 100%;
	-webkit-border-radius: 10px;
	-khtml-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	border: 2px dashed #0687FF;
}
#dropzone.rounded {
	-webkit-box-shadow: inset 0px 0px 50px #777;
	-moz-box-shadow: inset 0px 0px 50px #777;
	-o-box-shadow: inset 0px 0px 50px #777;
	box-shadow: inset 0px 0px 50px #777;
}
#dnd-thumbnails {
	height: 125px;
	margin-top: 10px;
}
#dnd-thumbnails img {
	width: 75px;
	height: 75px;
	border: 1px solid black;
	margin-right: 10px;
	-webkit-transition: -webkit-transform 0.2s ease-in, margin-left 0.7s ease-in-out, margin-right 0.7s ease-in-out;
	-moz-transition: -moz-transform 1s ease-in-out, margin-left 0.7s ease-in-out, margin-right 0.7s ease-in-out;
	-o-transition: -o-transform 1s ease-in-out, margin-left 1s ease-in-out, margin-left 0.7s ease-in-out, margin-right 0.7s ease-in-out;
}
#dnd-thumbnails img:hover {
	-webkit-transform: scale(3.0) rotate(10deg);
	-webkit-transform-origin: 50% 75px;
	-moz-transform: scale(3.0) rotate(10deg);
	-moz-transform-origin: 50% 75px;
	margin: 0 100px;
}
</style>
</head>

<body onLoad="GetJson();">
<div id="modules" style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;width:100% ">
<div class="yui-b" id="nib">
  <div class="yui-gb" id="t_1" style="margin-top: 14px; width::1002px;">
    <div class="yui-u first" id="c_1" style="width: 33%; display: block;height:300px" draggable="true"> </div>
    <div class="yui-u" id="c_2" style="width: 33%; margin-left: 0%;height:300px; display: block;"> </div>
    <div class="yui-u" id="c_3" style="width: 33%; margin-left: 0%;height:300px; display: block;"> </div>
    <div class="yui-u" id="c_4" style="width: 0%; margin-left: 0%; display: none;">
      <div class="modbox" id="m_1" draggable="true">1<br>
        Sunday<br>
        Saturday<br>
        Friday<br>
        Thursday<br>
        Wednesday</div>
      <div class="modbox" id="m_6" draggable="true">6<br>
        SK<br>
      </div>
      <div class="modbox" id="m_2" draggable="true">2<br>
        Sunday<br>
        Saturday<br>
        Friday<br>
        Thursday</div>
      <div class="modbox" id="m_3" draggable="true">3<br>
        Sunday<br>
        Saturday<br>
        Friday</div>
      <div class="modbox" id="m_4" draggable="true">4<br>
        Sunday<br>
        Saturday </div>
      <div class="modbox" id="m_5" draggable="true">5<br>
        Sunday<br>
      </div>
    </div>
  </div>
</div>
<div class="vbox boxcenter center" id="dropzone"></div>
<script type="text/javascript">
var divItems = document.querySelectorAll('div.modbox'),el = null;
var divContainer = document.querySelectorAll('div.yui-u'),eCon = null;
var tempContainer = document.getElementById("c_4");

function insertAfter(newElement,targetElement){
  var parent = targetElement.parentNode;
   if (parent.lastChild == targetElement){
       parent.appendChild(newElement);
       }else{
        parent.insertBefore(newElement,targetElement.nextSibling); 
       }
   }


function getCurrentStyle(oElement, sProperty) {  
if (oElement.currentStyle) {  
   return oElement.currentStyle[sProperty];  
    } else if (window.getComputedStyle) {  
        sProperty = sProperty.replace(/([A-Z])/g, "-$1").toLowerCase();  
        return window.getComputedStyle(oElement, null).getPropertyValue(sProperty);  
    } else {  
        return null;  
    }  
}  

//alert(divItems.length);
var counter = 0;
var moveItem = null;
var zhanWei = null;
var xjson = null;
var xhr = new XMLHttpRequest();
for (var i = 0; i < divContainer.length; i++)
{
	 eCon = divContainer[i];
	 eCon.addEventListener("dragenter",function(ev)
		{
			//console.log(this.id+"Cont1");
			if(this.getElementsByTagName("DIV").length == 0)
			{
			//this.insertBefore(moveItem);
			 //console.log(this.id);
			 this.appendChild(moveItem);
			}
			},false);	

		eCon.addEventListener("dragover",function(ev)
		{
			ev.preventDefault();
		},false);
}
 for (var i = 0; i < divItems.length; i++) {
	 el = divItems[i];	
     el.addEventListener("dragstart", function (ev) {
		 

         if (counter == 0) {
             
             //this.style.opacity = '0.4';
			 this.setAttribute("class", "over");
             moveItem = this;
             counter++;
         }



         var dt = ev.dataTransfer;
		 var dragIcon = document.createElement('img');
		 dragIcon.src="http://www.sohu.com/upload/imagesmend/sogouqq/sogou_se_tgbar_close_final1.gif";
         dt.effectAllowed = 'copyLink';
		 dt.setDragImage(dragIcon,-10,-10);
         dt.setData("text/plain", "你好");
     }, false);
	 
	 el.addEventListener("dragenter",function(ev)
		{
			if(moveItem.parentNode.id != this.parentNode.id)
			{
				
               console.log("set heigth1");
			   console.log(moveItem.parentNode.getElementsByTagName("DIV").length);
				if(moveItem.parentNode.getElementsByTagName("DIV").length == 1)
				{
					console.log("set heigth");
					moveItem.parentNode.style.height="300px";
					 this.parentNode.insertBefore(moveItem,this);
			    }
				else
				{
					 this.parentNode.insertBefore(moveItem,this);
					var h = null;
					 for (var n = 0; n < divItems.length; n++) {
						console.log(divItems[n].id);
						console.log("offsetHeight");
						console.log(divItems[n].offsetHeight);
						console.log("style");
						console.log(getCurrentStyle(divItems[n],"height"));
						h+=divItems[n].offsetHeight;
					 }
						moveItem.parentNode.style.height=h+"px";
				}
			}
			else if(moveItem.id != this.id)
			{
				 console.log("set heigth2");
				if(moveItem.nextSibling==this)
				{
				insertAfter(moveItem,this);
				}
				else
				{
					moveItem.parentNode.insertBefore(moveItem,this);
					
					}
				}
				dragpositionSave();
				
			},false);
	el.addEventListener("dragover",function(ev)
		{
		    ev.preventDefault();
			var  dt = ev.dataTransfer;
			dt.dropEffect = "link";
			
		},false);
		el.addEventListener("dragleave",function(ev)
		{
		},false);
		el.addEventListener("dragend",function(ev)
		{
			this.setAttribute("class", "modbox");
		    moveItem = null;
			counter = 0;
			
			
		},false);
		
 }
document.ondragover = function(e){e.preventDefault();};
document.ondrop = function(e){e.preventDefault();};
document.querySelector('#dropzone').addEventListener('drop', function(e) {
  var reader = new FileReader();
  reader.onload = function(evt) {
	  //alert(evt.result);
    document.querySelector('img').src = this.result;//evt.target.result;
  };

  reader.readAsDataURL(e.dataTransfer.files[0]);
}, false);
function GetJson()
{
	
	var sk = Math.random();

	xhr.onload = function (event) {
	    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
	        if (xhr.responseText.length > 0) {
	            xjson = eval('(' + xhr.responseText + ')');
	            var container;
	            console.log();
	            for (var p in xjson) {
					console.log("div");
	                console.log(p);
	                console.log(xjson[p].length);
	                container = document.getElementById(p);

	                for (var c = 0; c < xjson[p].length; c++) {
	                    container.appendChild(document.getElementById(xjson[p][c].id));
	                }
	            }
	        }
	    }
	    else {
	        //alert("2");

	    }
	}
	xhr.open("get", "Postion.ashx?u=" + sk, true);
	xhr.send(null);
	
}
function getContainerString(id)
{
  	var  colon = ":";
	var items = document.querySelectorAll("#"+ id +">div");
	var jsonString="";
	if(items.length>0)
	{
	     jsonString =id+ colon+"[";
		var itemsA = new Array();
		for(var c=0;c<items.length;c++)
		{
			itemsA.push(items[c].id);
		}
		jsonString+=itemsA.join(",");
		jsonString+="]";
	}
	console.log(jsonString);
	return jsonString;
}
function dragpositionSave()
{
	var  comma = ",";
    var jsonString ="{";
	var jsonStringA = new Array();
	var temp = getContainerString("c_1");
	if(temp!="")
	{
	   jsonStringA.push(temp);
	}
	temp = getContainerString("c_2");
	if(temp!="")
	{
	   jsonStringA.push(temp);
	}
	temp = getContainerString("c_3");
	if(temp!="")
	{
	   jsonStringA.push(temp);
	}
	jsonString += jsonStringA.join(comma);
	jsonString+="}";
	console.log(jsonString);
	var xjson1 = eval('(' + jsonString + ')');
	xhr.open("POST","PostionSave.ashx",true);
	xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
	xhr.send(jsonString);
}

</script> 
<img src="" onClick="dragpositionSave();"/>
<audio src="http://localhost/1.mp3" autoplay" >55</audio>
<video>
  <source src="Wildlife.wmv" type="vidio/ogg"; codecs="theora, vorbis">
</video>

    </div>


</body>
</html>
